<template>
  <div>
    <div id="selected">
      <div >
        <div class="selected_al">已选条件:</div>
        <div v-show="sct_2" class="selected_al_item" v-for="(item,sub) of select" :key="sub">
          {{item}}
        </div>
        <div v-show="sct" class="sct" @click="sct_3">×</div>
      </div>
      <ul @click="close">
        <li v-show="hode_1">
          <span>目的地：</span>
          <ul class="ul_item" @click="pro">
            <li class="main" v-for="item of provinceAll" :key="item.id">{{item.province_name}}</li>
          </ul>
          <div class="selected_po">
            <div class="selected_cl" >{{open}}</div>
            <div :class="tri"></div>
          </div>
        </li>
        <li v-show="hode_2">
          <span>目的地：</span>
          <ul class="ul_item">
            <li class="main" v-for="item of city" :key="item.id">{{item.city_name}}</li>
          </ul>
          <div v-show="fa" class="selected_po">
            <div class="selected_cl" >{{open}}</div>
            <div :class="tri"></div>
          </div>
        </li> 
        <li>
          <span>户外类型:</span>
          <ul class="ul_item">
            <li class="main" v-for="(item,sub) of outdoor " :key="sub">{{item}}</li>
          </ul>
          <div class="selected_po">
            <div class="selected_cl" >{{open}}</div>
            <div :class="tri"></div>
          </div>
        </li>
        <li>
          <span>主题游:</span>
          <ul class="ul_item">
            <li class="main"  v-for="(item,sub) of play " :key="sub">{{item}}</li>
          </ul>
          
        </li>
        <li>
          <span>优惠分类:</span>
          <ul class="ul_item ">
            <li class="main" v-for="(item,sub) of discounts " :key="sub">{{item}}</li>
          </ul>
        </li>
        <li>
          <span> 强度:</span>
          <ul class="ul_item ">
            <li class="main" v-for="(item,sub) of str " :key="sub">{{item}}</li>
          </ul>
        </li>
      </ul>
    </div>
    <intro :select="select" :keyword="keyword"></intro>
  </div> 
</template>
<style>
#selected {
  font-size: 13px;
  color: #333;
  margin: 0 auto;
  width: 1000px;
  box-sizing: border-box;
  position: relative;
}
#selected > div,
#selected > ul > li {
  border: 1px solid #e6e6e6;
  display: flex;
  width: 1000px;
  padding: 5px 30px 5px 30px;
}
.selected_al {
  line-height: 20px;
  height: 25px;
}
.sct {
  height: 25px;
  line-height: 20px;
  color: white;
  cursor: pointer;
  background: #31c27c;
  border: 1px solid gray;
  border-radius: 2px;
  padding: 0 8px;
}
.selected_al_item {
  height: 25px;
  line-height: 25px;
  margin: 0 10px;
  background: #31c27c;
  border-radius: 2px;
  color: white;
}
#selected > span {
  height: 30px;
  line-height: 20px;
}
#selected > ul > li > span {
  width: 100px;
}

.ul_item {
  background: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 600px;
}
.ul_item > li {
  width: 120px;
  padding-bottom: 5px;
}
.ul_item
  > li:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
  display: none;
}
.selected_po {
  position: relative;
  cursor: pointer;
}
.selected_cl {
  width: 40px;
}
.selected_tri {
  border-bottom: 4px solid #666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  top: 5px;
  right: 1px;
}
.selected_tri_z {
  border-top: 4px solid #666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  top: 5px;
  right: 1px;
}
.main {
  color: #999;
  cursor: pointer;
}
</style>
<script>
import intro from "../components/intro.vue";
export default {
  props:["keyword"],
  components:{
    intro
  },
  data() {
    return {
      open: "展开",
      tri: "selected_tri_z",
      provinceAll: [],
      city: [],
      outdoor: [
        "登山",
        "徒步",
        "露营",
        "亲子",
        "自驾",
        "休闲",
        "攀岩",
        "骑行",
        "潜水",
        "漂流",
        "探险",
        "摄影",
        "滑雪",
        "越野",
        "跑步",
        "溯溪",
        "其他"
      ],
      play: ["亲子露营", "自驾越野", "登山探险", "徒步穿越", "户外行游"],
      discounts: ["促销", "特价", "折扣"],
      str: ["1.0", "2.0", "3.0", "4.0", "5.0"],
      fa: false,
      hode_1: true,
      hode_2: false,
      sct: false,
      sct_2: true,
      select: [],
    };
  },
  mounted() {
    this.select = new Array(5);
    this.axios.get("province").then(result => {
      for (var item of result.data.results) {
        this.provinceAll.push(item);
      }
    });
  },
  methods: {
    sct_3() {
      this.sct_2 = false;
      this.sct = false;
      this.select = new Array(5);
      this.hode_1 = true;
      this.hode_2 = false;
      var txt = document.getElementsByClassName("main");
      for (var item of txt) {
        item.style.color = "#999";
      }
      var divs = document.getElementsByClassName("selected_al_item");
      for (var k of divs) {
        k.style.padding = "0 0";
      }
    },
    pro(e) {
      this.hode_1 = false;
      this.hode_2 = true;
      for (var i = 0; i < this.provinceAll.length; i++) {
        if (this.provinceAll[i].province_name == e.target.innerHTML) {
          this.axios
            .get("city", {
              params: {
                pid: this.provinceAll[i].id
              }
            })
            .then(result => {
              this.city = result.data.results;
              if (this.city.length > 5) {
                this.fa = true;
              } else {
                this.fa = false;
              }
            });
        }
      }
    },
    close(e) {
      this.sct_2 = true;
      //展开收起
      if (e.target.className == "selected_cl") {
        if (e.target.innerHTML == "展开") {
          e.target.innerHTML = "收起";
          e.target.nextSibling.className = "selected_tri";
          for (var item of e.target.parentNode.previousSibling.childNodes) {
            item.style.display = "block";
          }
        } else {
          e.target.innerHTML = "展开";
          e.target.nextSibling.className = "selected_tri_z";
          for (var item of e.target.parentNode.previousSibling.childNodes) {
            item.style.display = "";
          }
        }
      }
      //收集点击的文本
      if (e.target.className == "main") {
        //点击内容加颜色
        var lis = e.target.parentNode.childNodes;
        for (var item of lis) {
          item.style.color = "#999";
        }
        e.target.style.color = "#31c27c";
        this.sct = true;
        var divs = document.getElementsByClassName("selected_al_item");
        for (var k of this.provinceAll) {
          if (k.province_name == e.target.innerHTML) {
            this.select.splice(0, 1, k.province_name);
            divs[0].style.padding = "0 5px";
          }
        }
        for (var k of this.city) {
          if (k.city_name == e.target.innerHTML) {
            this.select.splice(0, 1, k.city_name);
            divs[0].style.padding = "0 5px";
          }
        }
        for (var k of this.outdoor) {
          if (k == e.target.innerHTML) {
            this.select.splice(1, 1, k);
            divs[1].style.padding = "0 5px";
          }
        }
        for (var k of this.play) {
          if (k == e.target.innerHTML) {
            this.select.splice(2, 1, k);
            divs[2].style.padding = "0 5px";
          }
        }
        for (var k of this.discounts) {
          if (k == e.target.innerHTML) {
            this.select.splice(3, 1, k);
            divs[3].style.padding = "0 5px";
          }
        }
        for (var k of this.str) {
          if (k == e.target.innerHTML) {
            this.select.splice(4, 1, k);
            divs[4].style.padding = "0 5px";
          }
        }
      }
    }
  }
};
</script>


